<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./JQurey.js"></script>
    <style>
        * {
            padding: 0; 
            margin: 0;
        }
        .box-1 {
            background-color: #999;
            padding-left: 100px;
            margin-bottom: 200px;
        }
      .ul1 {
          list-style: none;
          width: 80vw;
          margin: 0 auto;
      }
      .ul1>li {
          float: left;
          margin-left: 7vw;
      }
      .sm-img {
          width: 5vw;
          /* height: 8vw; */
      }
      p {
          margin-left: 5px;
          margin-top: 10px;
      }
      .box {
          position: relative;
          width: 80vw;
          margin: 0 auto;
      }
      .box img {
          width: 100%;
      }
    .big2 {
        position: absolute;
        top: 210px;
        left: 0;
    }
    .active1 {
        display: none;
    }
    .active2 {
        transform: scale(1.5);
        transition: all .5s;
    }
    #left {
        width: 80px;
        position: absolute;
        top: 210px;
        left: 0;
    
    }
    #right {
        width: 80px;
        position: absolute;
        top: 210px;
        right: 0;
    }
    
    </style>
</head>
<body>  
    <div class="box-1">
        一号店
    </div>
        <ul class="ul1">
        <li><img class="sm-img" src="./images/6-1.png" img1-src="./images/6-11.png" img2-src="./images/6-111.png"><p>肉蛋果蔬</p></li>
        <li><img class="sm-img" src="./images/6-2.png" img1-src="./images/6-22.png" img2-src="./images/6-222.png"><p>肉蛋果蔬</p></li>
        <li><img class="sm-img" src="./images/6-3.png" img1-src="./images/6-33.png" img2-src="./images/6-333.png"><p>肉蛋果蔬</p></li>
        <li><img class="sm-img" src="./images/6-4.png" img1-src="./images/6-44.png" img2-src="./images/6-444.png"><p>肉蛋果蔬</p></li>
        <li><img class="sm-img" src="./images/6-5.png" img1-src="./images/6-55.png" img2-src="./images/6-555.png"><p>肉蛋果蔬</p></li>
        <li><img class="sm-img" src="./images/6-6.png" img1-src="./images/6-66.png" img2-src="./images/6-666.png"><p>肉蛋果蔬</p></li>
        </ul>
        <div style="clear:both"></div>

        <div class="box">
            <img class="big1" src="./images/6-11.png">
            <img class="big2" src="./images/6-111.png">

            <img src="./images/left.png" id="left">
            <img src="./images/right.png" id="right">
        </div>






        
       
        
</body>
</html>
    <script>
       $(function(){
           $('.sm-img').on('mouseenter mouseleave',function(){
               // 第一张照片
               var src_ = $(this).attr('img1-src');
               $('.big1').attr('src',src_);
               // 第二张照片
               var src = $(this).attr('img2-src');
               $('.big2').attr('src',src);
               console.log($(this).siblings('p'));
               $(this).siblings('p').toggleClass('active1');
               $(this).toggleClass('active2');
           })




           // 公告轮播
           var lunbo = $(".box-1");
           var arr = ['1号店PC及H5调整公告','金币，优惠券、下线通知','礼平卡、账户金额、调整公告'];
           var timer = null ;
           //x 为下标
           var x = 0;
           timer = setInterval(function(){
                x++;
                //判断x大于等于数组下标 回到起始位置
                if(x >= arr.length){
                    x = 0;
                }
                lunbo.text(arr[x]);
           },5000)
           


       })


       

    </script>